<template>
  <div id="box">
       <h1 style="color: black; text-align:center;">在线课程论坛系统</h1>

   <div>
     <el-form :model="loginForm" label-width="100px" class="login-form">

       <h3 style="margin-bottom: 10px; color: aqua">登录</h3>
       <el-form-item label="账号" prop="sno">
         <el-input type="text" placeholder="请输入手机账号" v-model="loginForm.sno" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password">
         <el-input type="password" placeholder="请输入密码" v-model.number="loginForm.password"></el-input><br />

       </el-form-item>
       <el-form-item label="验证码" prop="imgCode">
         <el-input style="width: 160px;float: left;" type="text" placeholder="请输入验证码" v-model="loginForm.imgCode"
                   autocomplete="off"></el-input>
         <img alt="单击图片刷新！" :src="imgsrc" @click="changeImage" width="100px" height="40px">
         <span style="float:left;">忘记密码?<el-button type="success" size="mini" @click="getback">找回</el-button></span>
         <span style="float: right;">还没账号?去<el-button type="success" size="mini" @click="regist">注册</el-button></span>
       </el-form-item>
       <el-form-item>
         <!--<el-button size="mini" type="danger" @click="adminSubmit">管理员登录</el-button>-->
         <el-button size="max" style="width: 170px" type="primary" @click="userSubmit">登录</el-button>
         <el-button size="mini" @click="resetForm">重置</el-button>
       </el-form-item>
     </el-form>
   </div>
     <div style="height: 100px;"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imgsrc: 'http://localhost:8089/log/image',
        loginForm: {
          sno: '',
          password: '',
          imgCode: ''
        }
      }
    },
    created() {
      this.$router.go(1);
    },
    methods: {
      getback:function(){
        this.$router.push('/backpassword')
      },
      changeImage: function() {
        // alert('别点我');
        this.imgsrc = 'http://localhost:8089/log/image?d=' + new Date() * 1;
      },
      regist: function() {
        // alert("注册了")
        this.$router.push('regist')
      },
      /*管理员登录方法*/
      adminSubmit: function() {
        // 1.收集请求参数
        // 2.向后台发出请求
        // 3.处理响应
        // 4.跳转页面
        this.$http
          .post('/log/login', {  //请求路径
            'sno': this.loginForm.sno,
            'password': this.loginForm.password,
            'imgCode': this.loginForm.imgCode
          })
          .then(res => {
            if (res.data.statusCode == 200) {
              localStorage.setItem("user", JSON.stringify(res.data.data.user)),
              localStorage.setItem('token', res.data.data.token),
                /*this.$message({
                  message: '登录成功',
                  type: 'success'
                });*/
              this.$router.push('/main')
            }
          })
          .catch(error => {
            this.$message(error)
          })

      },
      userSubmit: function() {
        // 1.收集请求参数
        // 2.向后台发出请求
        // 3.处理响应
        // 4.跳转页面
        this.$http
          .post('/log/login', {
            'sno': this.loginForm.sno,
            'password': this.loginForm.password,
            'imgCode': this.loginForm.imgCode
          })
          .then(res => {
            if (res.data.statusCode == 200) {
              // console.log(res.data.data);
              localStorage.setItem("user", JSON.stringify(res.data.data.user));
              // localStorage.setItem('token', res.data.data.token);

              this.$message({
                  message: '登录成功',
                  type: 'success'
                }),
                this.$router.push('/');
            } else if (res.data.statusCode == 500) {
              this.$message.error(res.data.msg)
            } else if (res.data.statusCode == 404) {
              this.$message.error(res.data.msg)
            }
          })
          .catch(error => {
            this.$message(error)
          })

      },
      resetForm: function() {
        this.loginForm.sno = '';
        this.loginForm.password = '';
        this.loginForm.imgCode = ''
      }
    }
  }
</script>
<style scoped>
  #box{
    background-image: url("http://qsrr7y19m.hn-bkt.clouddn.com/tu2.jfif");
    background-repeat:no-repeat;
    background-size:1500px 609px ;
  }
  .login-form {
    margin: 10px auto;
    width: 400px;
    /*background: #fff;*/
    /*box-shadow: 0 0 35px #B4BCCC;*/
    padding: 60px 80px 30px 30px;
    border-radius: 25px;
    /*margin-top: 100px;*/
    background-color: transparent;
    font-weight:bold;
    text-align:center;   /*div盒子内的文字水平居中*/

    margin:0 auto;    /*div盒子水平居中*/

  }
  .login-form el-input {
    background-color: transparent;
    font-weight:bold
  }

</style>
